<script setup lang="ts">
import { onMounted, ref } from "vue";
const { locale, setLocale, tm } = useI18n();
const seo_title = computed(() => {
  return tm("shop.seo.title");
})
const seo_ogTitle = computed(() => {
  return tm("shop.seo.ogTitle");
})
const seo_description = computed(() => {
  return tm("shop.seo.description");
})
const seo_ogDescription = computed(() => {
  return tm("shop.seo.ogDescription");
})

const { $axios } = useNuxtApp();

const swiperData = ref<any>({ imgs: [], name: "", desc: "" });

// 首页数据获取
const fetchSwiperData = async () => {
  try {
    // GET请求
    const { isSuccess, data } = await $axios.get<any>(
      "/getSwiperByType?type=5"
    );

    if (isSuccess) {
      swiperData.value = data;
      // SEO 会根据中英文切换做不同的SEO
      useSeoMeta({
        keywords: swiperData.value.seoKeywords || tm("shop.seo.keywords"),
        title: swiperData.value.seoTitle || seo_title,
        ogTitle: swiperData.value.seoTitle || seo_ogTitle,
        description: swiperData.value.seoDesc || seo_description,
        ogDescription: swiperData.value.seoDesc || seo_ogDescription,
        ogImage: 'https://oss-cdn.tearful.cn/shop/banner/AP_memorial_day_sale_BANNERSv2-01_2048x2048.webp'
      })
    }

    console.log("获取数据成功 => ", swiperData.value);

    // POST请求示例
    // const result = await $axios.post('/users', { name: 'test', email: 'test@example.com' })
  } catch (error) {
    console.error("请求失败", error);
  }
};

onMounted(() => {
  // console.log("videos页面接受路由参数query", routeData)
  fetchSwiperData();
});
</script>

<template>
  <v-app>
    <!--    原：<v-sheet color="#F5F4F2">，去掉  color="#F5F4F2"  -->
    <v-sheet>
      <v-sheet color="transparent" class="pt-[72px]">
        <banner-image
          :HeadImage="swiperData.imgs[0] ? swiperData.imgs[0].url : ''"
          :HeadLabel="swiperData.name"
          :SubLabel="swiperData.desc"
        />
      </v-sheet>
      <div class="d-flex justify-center py-16">
        <v-sheet color="transparent" class="w-[90%]">
          <v-row>
            <!--     左边内容-->
            <v-col md="12" cols="12" class="">
              <v-sheet
                color="transparent"
                class="d-flex flex-column text-center"
              >
                <h1
                  class="py-4 text-[20px] text-[#413E3A] font-weight-black 2xl:text-[30px]"
                >
                  Journey with a Lighter Heart
                </h1>
                <p
                  class="py-4 text-[#999] text-xs font-weight-medium tracking-wide leading-6 2xl:text-[20px]"
                >
                  <<<<<<< HEAD Whether you're building a complete wheelset or
                  need tailor-made rims for a DIY project, we've got you
                  covered. From bicycles to wheelchairs, unicycles, and tandems,
                  our customization program is tailored to fit all your
                  practical needs and creative desires. We're taking the concept
                  of 'custom' to the next level by going above and beyond simple
                  color options to offer deep customization including rims and
                  spokes. This is made possible through our self-owned and
                  operated factory.
                </p>
                <p
                  class="py-4 text-[#999] text-xs font-weight-medium tracking-wide leading-6 2xl:text-[20px]"
                >
                  Why settle for the ordinary when you can create the
                  extraordinary with Light Bicycle!
                </p>
                <p
                  class="py-4 text-[#999] text-xs font-weight-medium tracking-wide leading-6 2xl:text-[20px]"
                >
                  With full control over every step of our manufacturing
                  process, we’re able to provide unrivaled customizations. If
                  you dream it we can create it! From a variety of rim weaves,
                  multiple finish options, laser engraving, custom hole counts,
                  and personalized decals, we can fine-tune the build to match
                  your unique vision and style. The level of customization
                  varies per rim type but will include the following features:
                  ======= We believe in the power of cycling to lift your
                  spirits. It's about shedding the weight of the day and setting
                  forth with ease. Let the cleansing sweat of your ride water
                  the soul, nurturing a lighter, brighter state of being.
                  >>>>>>> richardcai
                </p>
              </v-sheet>
            </v-col>
          </v-row>
        </v-sheet>
      </div>
    </v-sheet>
  </v-app>
</template>

<style scoped>
</style>